<template>
	<widget-root :styles="styles">
		<view class="rubik" :style="{margin: `-${$px2rpx(styles.margin/2)}rpx`}">
			<view class="rubik-item1" v-if="content.style==1">
				<block v-if="imgLists[0] && imgLists[0].url">
					<u-button class="item-image" :plain="true" open-type="contact" :custom-style="{
							padding: '0',
							width:'100%',
							height:'100%',
							display: 'flex',
							alignItems:'flex-start',
							margin: `${$px2rpx(styles.margin/2)}rpx`
						}" type="" :hair-line="false" size="medium" v-if="imgLists[0].link.path == 'customer_service'">
						<u-image mode="widthFix" :show-loading="false" :src="$getImageUri(imgLists[0].url)"
							style="width:100%;"></u-image>
					</u-button>
					<view v-else class="item-image" :style="{margin: `${$px2rpx(styles.margin/2)}rpx`}"
						@click="navigate(imgLists[0])">
						<u-image mode="widthFix" :show-loading="false" :src="$getImageUri(imgLists[0].url)"></u-image>
					</view>
				</block>
			</view>
			<view class="rubik-item2" v-if="content.style==2">
				<block v-for="(item, index) in imgLists" :key="index">
					<u-button class="item-image" :plain="true" open-type="contact" :custom-style="{
							padding: '0',
							width:'100%',
							height:'100%',
							display: 'flex',
							alignItems:'flex-start',
							margin: `${$px2rpx(styles.margin/2)}rpx`
						}" type="" :hair-line="false" size="medium" v-if="item.link.path == 'customer_service'">
						<u-image mode="widthFix" :show-loading="false" :src="$getImageUri(item.url)"
							:style="{width:'100%',}" v-if="item && item.url"></u-image>
					</u-button>
					<view v-else class="item-image" :style="{margin: `${$px2rpx(styles.margin/2)}rpx`}"
						@click="navigate(item)">
						<u-image mode="widthFix" :show-loading="false" :src="$getImageUri(item.url)"
							v-if="item && item.url"></u-image>
					</view>
				</block>
			</view>
			<view class="rubik-item3" v-if="content.style==3">
				<block v-for="(item, index) in imgLists" :key="index">
					<u-button class="item-image" :plain="true" open-type="contact" :custom-style="{
							padding: '0',
							width:'100%',
							height:'100%',
							display: 'flex',
							alignItems:'flex-start',
							margin: `${$px2rpx(styles.margin/2)}rpx`
						}" type="" :hair-line="false" size="medium" v-if="item.link.path == 'customer_service'">
						<u-image mode="widthFix" :show-loading="false" :src="$getImageUri(item.url)"
							:style="{width:'100%',}" v-if="item && item.url"></u-image>
					</u-button>
					<view v-else class="item-image" :style="{margin: `${$px2rpx(styles.margin/2)}rpx`}"
						@click="navigate(item)">
						<u-image mode="widthFix" :show-loading="false" :src="$getImageUri(item.url)"
							v-if="item && item.url"></u-image>
					</view>
				</block>
			</view>
			<view class="rubik-item4" v-if="content.style==4">
				<block v-if="imgLists[0] && imgLists[0].url">
					<u-button class="item-image" :style="{
					               'width': '50%',
					               'height': '375rpx',
					               'top': 0,
					               'left': 0
					           }" :plain="true" open-type="contact" :custom-style="{
							padding: '0',
							width:'100%',
							height:'100%',
						}" type="" :hair-line="false" size="medium" v-if="imgLists[0].link.path == 'customer_service'">
						<u-image height="100%" mode="aspectFill" :style="{width:'100%',height:'100%'}"
							:src="$getImageUri(imgLists[0].url)"></u-image>
					</u-button>
					<view v-else class="item-image" :style="{
					               'width': '50%',
					               'height': '375rpx',
					               'top': 0,
					               'left': 0
					           }" @click="navigate(imgLists[0])">
						<u-image height="100%" width="100%" mode="aspectFill"
							:src="$getImageUri(imgLists[0].url)"></u-image>
					</view>
				</block>
				<block v-if="imgLists[1] && imgLists[1].url">
					<u-button class="item-image" :style="{
                               'width': '50%',
                               'height': '188rpx',
                               'top':0,
                               'left': '50%'
					           }" :plain="true" open-type="contact" :custom-style="{
							padding: '0',
							width:'100%',
							height:'100%',
						}" type="" :hair-line="false" size="medium" v-if="imgLists[1].link.path == 'customer_service'">
						<u-image height="100%" mode="aspectFill" :style="{width:'100%',height:'100%'}"
							:src="$getImageUri(imgLists[1].url)"></u-image>
					</u-button>
					<view v-else class="item-image" :style="{
                               'width': '50%',
                               'height': '188rpx',
                               'top':0,
                               'left': '50%'
                           }" @click="navigate(imgLists[1])">
						<u-image height="100%" width="100%" mode="aspectFill"
							:src="$getImageUri(imgLists[1].url)"></u-image>
					</view>
				</block>
				<block v-if="imgLists[2] && imgLists[2].url">
					<u-button class="item-image" :style="{
                               'width': '50%',
                               'height': '188rpx',
                               'top': '188rpx',
                               'left': '50%'
					           }" :plain="true" open-type="contact" :custom-style="{
							padding: '0',
							width:'100%',
							height:'100%',
						}" type="" :hair-line="false" size="medium" v-if="imgLists[2].link.path == 'customer_service'">
						<u-image height="100%" mode="aspectFill" :style="{width:'100%',height:'100%'}"
							:src="$getImageUri(imgLists[2].url)"></u-image>
					</u-button>
					<view v-else class="item-image" :style="{
                               'width': '50%',
                               'height': '188rpx',
                               'top': '188rpx',
                               'left': '50%'
                           }" @click="navigate(imgLists[2])">
						<u-image height="100%" width="100%" mode="aspectFill"
							:src="$getImageUri(imgLists[2].url)"></u-image>
					</view>
				</block>
			</view>
			<view class="rubik-item5" v-if="content.style==5">
				<block v-for="(item, index) in imgLists" :key="index">
					<u-button class="item-image" :plain="true" open-type="contact" :custom-style="{
							padding: '0',
							width:'100%',
							height:'100%',
							display: 'flex',
							alignItems:'flex-start',
						}" type="" :hair-line="false" size="medium" v-if="item.link.path == 'customer_service'">
						<u-image mode="aspectFill" height="100%" :style="{width:'100%',height:'100%'}"
							:src="$getImageUri(item.url)" v-if="item && item.url"></u-image>
					</u-button>
					<view v-else class="item-image" @click="navigate(item)">
						<u-image mode="aspectFill" width="100%" height="100%" :src="$getImageUri(item.url)"
							v-if="item && item.url">
						</u-image>
					</view>
				</block>
			</view>
			<view class="rubik-item6" v-if="content.style==6">
				<block v-if="imgLists[0] && imgLists[0].url">
					<u-button class="item-image" :style="{
                               'width': '100%',
                               'height': '188rpx',
                               'top': 0,
                               'left': 0
					           }" :plain="true" open-type="contact" :custom-style="{
							padding: '0',
							width:'100%',
							height:'100%',
						}" type="" :hair-line="false" size="medium" v-if="imgLists[0].link.path == 'customer_service'">
						<u-image height="100%" mode="aspectFill" :style="{width:'100%',height:'100%'}"
							:src="$getImageUri(imgLists[0].url)"></u-image>
					</u-button>
					<view v-else class="item-image" :style="{
                               'width': '100%',
                               'height': '188rpx',
                               'top': 0,
                               'left': 0
                           }" @click="navigate(imgLists[0])">
						<u-image height="100%" width="100%" mode="aspectFill"
							:src="$getImageUri(imgLists[0].url)"></u-image>
					</view>
				</block>
				<block v-if="imgLists[1] && imgLists[1].url">
					<u-button class="item-image" :style="{
                               'width': '50%',
                               'height': '188rpx',
                               'top':'188rpx',
                               'left': 0
					           }" :plain="true" open-type="contact" :custom-style="{
							padding: '0',
							width:'100%',
							height:'100%',
						}" type="" :hair-line="false" size="medium" v-if="imgLists[1].link.path == 'customer_service'">
						<u-image height="100%" mode="aspectFill" :style="{width:'100%',height:'100%'}"
							:src="$getImageUri(imgLists[1].url)"></u-image>
					</u-button>
					<view v-else class="item-image" :style="{
                               'width': '50%',
                               'height': '188rpx',
                               'top':'188rpx',
                               'left': 0
                           }" @click="navigate(imgLists[1])">
						<u-image height="100%" width="100%" mode="aspectFill"
							:src="$getImageUri(imgLists[1].url)"></u-image>
					</view>
				</block>
				<block v-if="imgLists[2] && imgLists[2].url">
					<u-button class="item-image" :style="{
                               'width': '50%',
                               'height': '188rpx',
                               'top': '188rpx',
                               'left': '50%'
					           }" :plain="true" open-type="contact" :custom-style="{
							padding: '0',
							width:'100%',
							height:'100%',
						}" type="" :hair-line="false" size="medium" v-if="imgLists[2].link.path == 'customer_service'">
						<u-image height="100%" mode="aspectFill" :style="{width:'100%',height:'100%'}"
							:src="$getImageUri(imgLists[2].url)"></u-image>
					</u-button>
					<view v-else class="item-image" :style="{
                               'width': '50%',
                               'height': '188rpx',
                               'top': '188rpx',
                               'left': '50%'
                           }" @click="navigate(imgLists[2])">
						<u-image height="100%" width="100%" mode="aspectFill"
							:src="$getImageUri(imgLists[2].url)"></u-image>
					</view>
				</block>
			</view>
		</view>
	</widget-root>
</template>

<script type="text/javascript">
	export default {
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
		},
		data() {
			return {

			}
		},
		methods: {
			// 跳转页面
			navigate(item) {
				const {
					path,
					params,
					type
				} = item.link

				if (item.appid != undefined && item.appid != '') {
					uni.navigateToMiniProgram({
						appId: item.appid,
						path: item.app_path,
						success: (res) => {
							// console.log(res)
						}
					})
				} else if (type == 'call_phone') {
					uni.makePhoneCall({
						phoneNumber: params.phone
					})
				} else if (type == 'send_msg') {
					uni.sendSms({
						phoneNumber: params.phone
					})
				} else {
					if (!path) return
					this.$Router.push({
						path: path,
						query: params
					})
				}
			}
		},
		computed: {
			imgLists() {
				return this.content.data
			}
		}
	};
</script>

<style lang="scss" scoped>
	.rubik {
		.rubik-item2 {
			display: flex;

			.item-image {
				flex: 1 1 auto;
				width: 50%;
			}
		}

		.rubik-item3 {
			display: flex;

			.item-image {
				flex: 1 1 auto;
				width: 33.3%;
			}
		}

		.rubik-item4,
		.rubik-item6 {
			position: relative;
			width: 100%;
			height: 375rpx;

			.item-image {
				position: absolute;
			}
		}

		.rubik-item5 {
			display: flex;
			flex-wrap: wrap;

			.item-image {
				flex: 1 1 auto;
				width: 50%;
				height: 188rpx;

			}
		}
	}
</style>